<template>
    <div class="menBox">
        <div class="pictureBox" v-for="item in modelData" @click="toDetails(item.id)">
            <img :src="item.headImage" alt="">
            <div class="name">
                {{ item.name }}
            </div>
        </div>
    </div>
    <div v-if="modelData.length===0" class="h1">COMMING SOON</div>
</template>

<script setup lang="ts">
import { searchAllMaleModelAPI } from '@/apis/user';
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';

const router = useRouter()

const toDetails = (id: number) => {
    router.push('/details/' + id)
}

const modelData=ref([])

const getModels = async () => {
    const res = await searchAllMaleModelAPI()

    if (res.data.code === 200) {
        modelData.value=res.data.data
    } 
    else {
        ElMessage.error(res.data.msg)
    }
}

onMounted(()=>{
    getModels()
})
</script>

<style lang="scss" scoped>
@media (min-width: 1280px) and (max-width: 1920px) {}

@media (min-width: 750px) and (max-width: 1280px) {
    .menBox {
        width: 100%;
        margin-top: 20px !important;
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .h1 {

        font-size: 48px !important;

    }
}

@media (max-width: 750px) {
    .menBox {
        width: 100%;
        margin-top: 20px !important;
        grid-template-columns: repeat(5, 1fr) !important;

        .name {
            font-size: 12px;
        }
    }

    .h1 {

        font-size: 32px !important;

    }
}

.h1 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 56px;
    font-weight: bold;
    margin-bottom: 600px;
}

.menBox {
    width: 100%;
    max-width: 1280px;
    display: grid;
    // margin-top: 144px;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin: 16px auto 0px;
    // background-color: aqua;

    .pictureBox {

        // height: 330px;
        overflow: hidden;
        position: relative;

        img {
            width: 100%;
            // height: 100%;
            object-fit: fill;
        }

        .name {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 8px 5px;
            height: 24px;
            background-color: rgb(0 0 0 / 0.3);
            display: flex;
            align-items: center;
            justify-content: center;

            color: white;
            font-weight: bold;

        }
    }
}
</style>